<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>部门列表</span>
            </div>
            <el-tree
              :data="departments"
              :props="defaultProps"
              @node-click="handleNodeClick"
              default-expand-all
              highlight-current>
            </el-tree>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ currentDepartment ? currentDepartment.label + '成员' : '全部成员' }}</span>
              <el-input
                placeholder="搜索成员"
                v-model="searchQuery"
                style="width: 200px; float: right; margin-right: 10px;"
                prefix-icon="el-icon-search"
                @input="handleSearch">
              </el-input>
            </div>
            <el-table
              :data="filteredContacts"
              style="width: 100%">
              <el-table-column
                prop="name"
                label="姓名"
                width="120">
              </el-table-column>
              <el-table-column
                prop="department"
                label="部门"
                width="120">
              </el-table-column>
              <el-table-column
                prop="position"
                label="职位"
                width="120">
              </el-table-column>
              <el-table-column
                prop="email"
                label="邮箱"
                width="180">
              </el-table-column>
              <el-table-column
                prop="phone"
                label="电话"
                width="150">
              </el-table-column>
              <el-table-column
                label="操作"
                width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleView(scope.row)">查看</el-button>
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleSendMessage(scope.row)">发消息</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 联系人详情对话框 -->
      <el-dialog title="联系人详情" :visible.sync="dialogVisible" width="30%">
        <div v-if="currentContact" class="contact-detail">
          <div class="avatar-container">
            <img :src="currentContact.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" class="avatar">
          </div>
          <div class="info-container">
            <p><strong>姓名：</strong>{{ currentContact.name }}</p>
            <p><strong>部门：</strong>{{ currentContact.department }}</p>
            <p><strong>职位：</strong>{{ currentContact.position }}</p>
            <p><strong>邮箱：</strong>{{ currentContact.email }}</p>
            <p><strong>电话：</strong>{{ currentContact.phone }}</p>
            <p><strong>手机：</strong>{{ currentContact.mobile }}</p>
            <p><strong>办公地点：</strong>{{ currentContact.office }}</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-button type="primary" @click="handleSendMessage(currentContact)">发送消息</el-button>
        </span>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Contacts',
    data() {
      return {
        departments: [
          {
            id: 1,
            label: '公司管理层',
            children: []
          },
          {
            id: 2,
            label: '研发部',
            children: [
              {
                id: 21,
                label: '前端组'
              },
              {
                id: 22,
                label: '后端组'
              },
              {
                id: 23,
                label: '测试组'
              }
            ]
          },
          {
            id: 3,
            label: '市场部',
            children: []
          },
          {
            id: 4,
            label: '销售部',
            children: []
          },
          {
            id: 5,
            label: '人事部',
            children: []
          },
          {
            id: 6,
            label: '财务部',
            children: []
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        contacts: [
          {
            id: 1,
            name: '张三',
            department: '公司管理层',
            position: '总经理',
            email: 'zhangsan@company.com',
            phone: '010-12345678',
            mobile: '13800138000',
            office: 'A座1001',
            departmentId: 1
          },
          {
            id: 2,
            name: '李四',
            department: '研发部',
            position: '技术总监',
            email: 'lisi@company.com',
            phone: '010-12345679',
            mobile: '13800138001',
            office: 'B座2001',
            departmentId: 2
          },
          {
            id: 3,
            name: '王五',
            department: '研发部/前端组',
            position: '前端负责人',
            email: 'wangwu@company.com',
            phone: '010-12345680',
            mobile: '13800138002',
            office: 'B座2002',
            departmentId: 21
          },
          {
            id: 4,
            name: '赵六',
            department: '研发部/后端组',
            position: '后端负责人',
            email: 'zhaoliu@company.com',
            phone: '010-12345681',
            mobile: '13800138003',
            office: 'B座2003',
            departmentId: 22
          },
          {
            id: 5,
            name: '钱七',
            department: '市场部',
            position: '市场总监',
            email: 'qianqi@company.com',
            phone: '010-12345682',
            mobile: '13800138004',
            office: 'C座3001',
            departmentId: 3
          },
          {
            id: 6,
            name: '孙八',
            department: '销售部',
            position: '销售总监',
            email: 'sunba@company.com',
            phone: '010-12345683',
            mobile: '13800138005',
            office: 'C座3002',
            departmentId: 4
          },
          {
            id: 7,
            name: '周九',
            department: '人事部',
            position: '人事总监',
            email: 'zhoujiu@company.com',
            phone: '010-12345684',
            mobile: '13800138006',
            office: 'D座4001',
            departmentId: 5
          },
          {
            id: 8,
            name: '吴十',
            department: '财务部',
            position: '财务总监',
            email: 'wushi@company.com',
            phone: '010-12345685',
            mobile: '13800138007',
            office: 'D座4002',
            departmentId: 6
          }
        ],
        currentDepartment: null,
        searchQuery: '',
        filteredContacts: [],
        dialogVisible: false,
        currentContact: null
      }
    },
    created() {
      this.filteredContacts = this.contacts
    },
    methods: {
      handleNodeClick(data) {
        this.currentDepartment = data
        this.searchQuery = ''
        this.filterContacts()
      },
      handleSearch() {
        this.filterContacts()
      },
      filterContacts() {
        if (!this.currentDepartment && !this.searchQuery) {
          this.filteredContacts = this.contacts
          return
        }
        
        this.filteredContacts = this.contacts.filter(contact => {
          // 部门过滤
          let departmentMatch = true
          if (this.currentDepartment) {
            if (this.currentDepartment.children && this.currentDepartment.children.length > 0) {
              // 如果有子部门，则匹配当前部门及其子部门
              const childIds = this.currentDepartment.children.map(child => child.id)
              departmentMatch = contact.departmentId === this.currentDepartment.id || childIds.includes(contact.departmentId)
            } else {
              departmentMatch = contact.departmentId === this.currentDepartment.id
            }
          }
          
          // 搜索过滤
          let searchMatch = true
          if (this.searchQuery) {
            const query = this.searchQuery.toLowerCase()
            searchMatch = contact.name.toLowerCase().includes(query) ||
                          contact.department.toLowerCase().includes(query) ||
                          contact.position.toLowerCase().includes(query) ||
                          contact.email.toLowerCase().includes(query) ||
                          contact.phone.includes(query)
          }
          
          return departmentMatch && searchMatch
        })
      },
      handleView(row) {
        this.currentContact = row
        this.dialogVisible = true
      },
      handleSendMessage(row) {
        this.$message({
          message: `准备向${row.name}发送消息`,
          type: 'success'
        })
        // 实际项目中应该跳转到消息页面或打开消息对话框
      }
    }
  }
  </script>
  
  <style scoped>
  .contact-detail {
    display: flex;
    align-items: flex-start;
  }
  .avatar-container {
    margin-right: 20px;
  }
  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .info-container {
    flex: 1;
  }
  </style>